<template>
  <div>
    <div style="width: 600px;height: 300px;margin:0 auto;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);">
      <div style="display: flex;flex-direction: column;">
        <div class="di" style="margin: 50px">
          <span style="margin-right: 20px">用户账号</span>
          <el-input v-model="username" aria-placeholder="用户名" style="width: 150px">{{
              username
            }}
          </el-input>
        </div>
        <div class="di" style="margin: 25px">
          <span style="margin-right: 20px">用户密码</span>
          <el-input v-model=" password" aria-placeholder="密码" style="width: 150px" type="password">{{
              password
            }}
          </el-input>
        </div>
        <div class="di">
          <el-button type="success" @click="userLogin">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    userLogin() {
      let url = "api/user/userLogin/" + this.username + "/" + this.password;
      this.axios.get(url).then(
          result => {
            // console.log(result);
            let user = result.data;
            if (result.data == '' || result.data == null) {
              this.$notify({
                title: '登陆失败',
                message: ('请检查你的用户账号与密码是否正确')
              });
            } else {
              //将当前登录的用户放入全局变量中
              this.$store.state.user = user
              //日志添加
              let url = "api/log/addLog/" + this.$store.state.user.username
              this.axios.post(url).then(r => {
                this.$notify({
                  title: '登录成功',
                  message: (r.data.info)
                });
                //跳转至index界面
                this.$router.push("Index")
              })
            }
          }
      )
    }
  }

}
</script>

<style scoped>

</style>